<template>
  <div class="form-date">
    <el-date-picker v-model="startTime" type="date" placeholder="开始时间" @change="handleStartChange" :clearable="false" />
    <slot></slot>
    <el-date-picker
      v-model="endTime"
      type="date"
      placeholder="结束时间"
      @change="handleEndChange"
      :clearable="false"
      :default-time="defaultTime(23,59,59)" />
    <div class="radio-select">
      <el-radio-group v-model="radio" class="ml-4" @change="handleRadioChange">
        <el-radio label="1" size="large">今天</el-radio>
        <el-radio label="2" size="large">昨天</el-radio>
        <el-radio label="3" size="large">近三天</el-radio>
        <el-radio label="4" size="large">近一周</el-radio>
        <el-radio label="5" size="large">近一个月</el-radio>
        <el-radio label="6" size="large">近三个月</el-radio>
        <el-radio label="7" size="large">近一年</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import moment from 'moment/moment';
import {ElMessage} from 'element-plus';
const startTime = defineModel<string>("startTime");
const endTime = defineModel<string>("endTime");
const radio = defineModel<string>("radio");

// const radio = ref();
const defaultTime=(h:number,m:number,s:number)=>{
  let now = new Date();
  now.setHours(h);
  now.setMinutes(m);
  now.setSeconds(s);
  return now;
}
const handleStartChange= () => {
  startTime.value = moment(startTime.value).format("YYYY-MM-DDTHH:mm:ss");
  radio.value = "";
}
const handleEndChange = () => {
  if(startTime.value!=='' && moment(startTime.value).diff(moment(endTime.value)) >= 0){
    endTime.value='';
    ElMessage.error("开始时间不能晚于结束时间");
  }else{
    endTime.value = moment(endTime.value).format("YYYY-MM-DDTHH:mm:ss");
    radio.value = "";
  }
}
const handleRadioChange = ()=>{
  let now = new Date();
  now.setHours(0, 0, 0);
  let now1 = new Date();
  now1.setHours(23, 59, 59);
  switch (radio.value) {
    case "1":
      startTime.value = moment(now).format("YYYY-MM-DDTHH:mm:ss");
      endTime.value = moment(now1).format("YYYY-MM-DDTHH:mm:ss");
      break;
    case "2":
      startTime.value = moment(now)
        .subtract(1, "days")
        .format("YYYY-MM-DDTHH:mm:ss");
      endTime.value = moment(now1)
        .subtract(1, "days")
        .format("YYYY-MM-DDTHH:mm:ss");
      break;
    case "3":
      startTime.value = moment(now)
        .subtract(3, "days")
        .format("YYYY-MM-DDTHH:mm:ss");
      endTime.value = moment(now1).format("YYYY-MM-DDTHH:mm:ss");
      break;
    case "4":
      startTime.value = moment(now)
        .subtract(7, "days")
        .format("YYYY-MM-DDTHH:mm:ss");
      endTime.value = moment(now1).format("YYYY-MM-DDTHH:mm:ss");
      break;
    case "5":
      startTime.value = moment(now)
        .subtract(1, "months")
        .format("YYYY-MM-DDTHH:mm:ss");
      endTime.value = moment(now1).format("YYYY-MM-DDTHH:mm:ss");
      break;
    case "6":
      startTime.value = moment(now)
        .subtract(3, "months")
        .format("YYYY-MM-DDTHH:mm:ss");
      endTime.value = moment(now1).format("YYYY-MM-DDTHH:mm:ss");
      break;
    case "7":
      startTime.value = moment(now)
        .subtract(1, "years")
        .format("YYYY-MM-DDTHH:mm:ss");
      endTime.value = moment(now1).format("YYYY-MM-DDTHH:mm:ss");
      break;
    default:
      break;
  }
}
const handleClearRadio=()=>{
  radio.value = "";
}
defineExpose({
  handleClearRadio
})
</script>

<style scoped lang="scss">
.form-date{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .radio-select{
   margin-left: 10px;
  }
}
</style>
